<template>
	<view class="container">
		<view class="headerIcon" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<!-- //头部导航加padding给状态栏腾地 -->
		</view>
		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-input u-f-ajc">
				<image :src="topIcon"></image>
				<u-search bg-color="#f4f4f4" shape="square" placeholder="请输入您喜欢的商品" @search="search" :show-action="false"
				 :clearabled="true" v-model="keyword"></u-search>
			</view>
		</view>
		<!-- 点击导航 -->
		<view class="navigation">
			<scroll-view scroll-x show-scrollbar enable-flex class="navigation_bg">
				<view class="navigation_box">
					<span v-for="(item, index) in navList" :key="index" :class="item.ids == navListNow?'active':''" @click="navChange(item.ids)">
						{{item.title}}
					</span>
				</view>
			</scroll-view>
		</view>
		<view v-if="changeBox == 0">
			<view class="index-elements" v-for="component in components_list" :key="component.id">
				<!-- 轮播图 -->
				<view class="swiper-section" v-if="component.type == 'banner'">
					<view class="index-elements-bg"></view>
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#fff">
						<swiper-item v-for="item in component.data" :key="item.id" @click="$jump(item.linkUrl)">
							<view class="swiper-item">
								<image :src="item.imgUrl" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			
				<uni-carousel v-if="component.type == 'nav'" :carouselList="Object.values(component.data)" height="90" :type="component.style.type"
				 :num="component.style.num" @onCarousel="onCarousel"></uni-carousel>
			
				<!-- 海报图片-->
				<view class="pic-group" v-if="component.type == 'adimg'">
					<view :class="[`pic-style pic-style-${component.style.type}`]">
						<image v-if="component.style.type == 1 || component.style.type == 5 || component.style.type == 7" v-for="(item, id, index) in component.data"
						 :key="index" class="img-pic" :src="item.imgUrl" @click="$jump(item.linkUrl)" mode="widthFix"></image>
						<image v-else v-for="(item, id, index) in component.data" :key="item.id" class="img-pic" :src="item.imgUrl" @click="$jump(item.linkUrl)"></image>
						<!-- <image v-for="(item, id, index) in component.data" :key="index" class="img-pic" :src="item.imgUrl" @click="$jump('/pages/main/salesPromotion?title=0')" mode="widthFix"></image> -->
					</view>
				</view>
				<!-- 辣选直播 -->
				<!-- <view class="some_box" v-if="component.type == 'adimg'">
					<view class="some_box_one">
						<view class="some_box_one_eve">
							<view class="some_box_one_eve_top">
								辣选直播
							</view>
							<text>帮你开店做老板，百万粉丝等你来</text>
							<image src="/static/new/2.gif"></image>
						</view>
						<view class="some_box_one_eve">
							<view class="some_box_one_eve_top">
								年货会场
							</view>
							<text>省心更省钱</text>
							<image src="/static/new/2.gif"></image>
						</view>
					</view>
					<view class="some_box_two">
						<view class="some_box_two_eve" @click="$jump('/pages/main/salesPromotion?title=1')">
							<view class="some_box_two_eve_top">
								美妆护肤
							</view>
							<text>潮流美妆 引领时尚</text>
							<view class="some_box_two_eve_bot">
								<view class="some_box_two_eve_bot_eve">
									<image src="/static/new/2.gif"></image>
									<text>口红</text>
								</view>
								<view class="some_box_two_eve_bot_eve">
									<image src="/static/new/2.gif"></image>
									<text>香水</text>
								</view>
							</view>
						</view>
						<view class="some_box_two_eve" @click="$jump('/pages/main/salesPromotion?title=2')">
							<view class="some_box_two_eve_top">
								家居百货
							</view>
							<text>爱家爱生活</text>
							<view class="some_box_two_eve_bot">
								<view class="some_box_two_eve_bot_eve">
									<image src="/static/new/2.gif"></image>
									<text>口红</text>
								</view>
								<view class="some_box_two_eve_bot_eve">
									<image src="/static/new/2.gif"></image>
									<text>香水</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 限时抢购 -->
				<!-- <view class="flash" v-if="component.type == 'adimg'">
					<view class="flash_top">
						<image src="../../static/new/icon_02.png"></image>
						<text class="flash_top_text">限时抢购</text>
					</view>
					<view class="flash_time">
						<scroll-view scroll-x show-scrollbar enable-flex class="flash_time_bg">
							<view class="flash_time_box">
								<view class="flash_time_box_eve" v-for="(item, index) in flashBox" :key="index" :class="item.id == flashBoxNow?'active':''" @click="flashBoxBtn(item.id)">
									<view class="flash_time_box_eve_bg"></view>
									<span class="flash_time_box_eve_time">
										{{item.time}}
									</span>
									<span class="flash_time_box_eve_text">
										{{item.state}}
									</span>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="flash_content">
						<image src="/static/new/2.gif"></image>
						<view class="flash_content_right">
							<text class="flash_content_right_name">染发剂</text>
							<view class="flash_content_right_num">
								<view class="flash_content_right_num_percentage">
									<view class="flash_content_right_num_percentage_now">已售80%</view>
								</view>
								<text>限量150件</text>
							</view>
							<view class="flash_content_right_price">
								<view class="flash_content_right_price_left">
									<text class="flash_content_right_price_left_now">$66.6</text>
									<text class="flash_content_right_price_left_old">99</text>
								</view>
								<view class="flash_content_right_price_buy">
									立即抢
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 商品列表 -->
				<view class="goods-section" v-if="component.type == 'goods_list'">
					<view class="goods-header">
						<image src="../../static/new/icon_01.png"></image>
						<text>爆款推荐</text>
					</view>
					<view class="goods-list u-f-jsb u-f-fw">
						<view class="goods-item" v-for="(item, index) in component.data" :key="index" @click="$jump(item.url)">
							<image :src="item.logo" mode=""></image>
							<view class="title u-line-clamp">{{ item.title }}</view>
							<view class="price u-f-ac">
								<view style="font-size: 28upx;">￥</view>
								{{ item.price_market }}
								<text>￥{{ item.price_cost }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 150upx;background-color: #f3f3f3;"></view>
			<view class="popup1" v-if="show">
				<view class="mask"></view>
				<view class="shade">
					<view class="list">
						<view style="display: flex;flex-direction: column;height: 782upx;margin-bottom: 44upx;position: relative;padding:0 33upx;">
							<image style="width: 100%;height: 782upx;display: flex;justify-content: center;" src="../../static/img/index-bg.png"
							 mode=""></image>
							<view style="position: absolute;bottom: 30upx;left: 0px;width: 100%;">
								<view style="font-size: 32upx;font-weight: 400;color: #7B889B;line-height: 50upx;text-align: center;display: flex;justify-content: center;flex-direction: column;">
									<view>您当前收益已经达到{{num}}元</view>
									<view style="margin-bottom: 54upx;">请原点复投</view>
								</view>
								<view style="display: flex;justify-content: space-around;align-items: center;margin: 0 36upx;">
									<view style="position: relative;" @click="show=!show">
										<image style="width: 262upx;height: 86upx;" src="../../static/img/index-color.png" mode=""></image>
										<view style="position: absolute;top:20upx;left: 84upx;color: #fff;">去复投</view>
									</view>
									<view style="position: relative;" @click="show=!show">
										<image style="width: 262upx;height: 86upx;" src="../../static/img/index-color1.png" mode=""></image>
										<view style="position: absolute;top:20upx;left: 56upx;color: #fff;">我再考虑一下</view>
									</view>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 100upx;display: flex;justify-content: center;" @click="show=!show">
							<image style="width: 104upx;height: 104upx;" src="../../static/img/index-close.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifndef APP-PLUS -->
			<!-- <tabbar :current-page="0"></tabbar> -->
			<!-- #endif -->
		</view>
		<!--  ----------------------------------------------新list---------------------------------------------- -->
		<view v-if="changeBox == 1">
			<view class="content">
				<!-- <view class="navbar" :style="{position:headerPosition}">
					<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1,synthesis)">
						<text>销量</text>
						<view class="p-box" v-if="filterIndex === 1">
							<uni-icons size="16" type="arrowdown" class="icon" color="#f81149" v-if="synthesis == 1"></uni-icons>
							<uni-icons size="16" type="arrowup" class="icon" color="#f81149" v-else></uni-icons>
						</view>
					</view>
			
					<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2,synthesis)">
						<text>价格</text>
						<view class="p-box" v-if="filterIndex === 2">
							<uni-icons size="16" type="arrowdown" class="icon" color="#f81149" v-if="synthesis == 1"></uni-icons>
							<uni-icons size="16" type="arrowup" class="icon" color="#f81149" v-else></uni-icons>
						</view>
					</view>
				</view> -->
				<view class="goods-list">
					<view v-for="(item, index) in goodsCate" :key="index" class="goods-item" @click="navToDetailPage(item.id)">
						<view class="image-wrapper">
							<image :src="item.logo" mode="aspectFill"></image>
						</view>
						<text class="title clamp u-line-clamp">{{item.title}}</text>
						<view class="price-box">
							<text class="price">{{item.price_market}}</text>
							<text class="old-price"> {{item.price_cost}}</text>
						</view>
					</view>
				</view>
				<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
			
				<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
					<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
						<scroll-view scroll-y class="cate-list">
							<view v-for="item in cateList" :key="item.id">
								<view class="cate-item b-b two">{{item.name}}</view>
								<view class="children-content">
									<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b children-list" :class="{active: tItem.id==cateId}"
									 @click="changeCate(tItem)">
										<view class="cl">
											{{tItem.name}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	import service from '@/store/service.js';
	import uicons from '@/components/uni-icons/uni-icons.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

	export default {
		components: {
			uicons,
			uniLoadMore
		},
		data() {
			return {
				statusBarHeight:uni.getStorageSync('statusBarHeight'),//状态栏高度
				show: false,
				keyword: '',
				components_list: [],
				goodList: [],
				num: '',
				changeBox:0,
				navListNow:null,
				navList:[
					{type:0,name:"首页"},
					{type:1,name:"厨房电器"},
					{type:1,name:"家居百货"},
					{type:1,name:"美妆护肤"},
					{type:1,name:"食品生鲜"},
					{type:1,name:"服装箱包"},
					{type:1,name:"微瑕区"},
					{type:1,name:"时令果蔬"},
				],
				flashBoxNow:0,
				flashBox:[
					{id:0,time:"06:00",state:"抢购中"},
					{id:1,time:"07:00",state:"未开始"},
					{id:2,time:"08:00",state:"未开始"},
					{id:3,time:"09:00",state:"未开始"},
					{id:4,time:"10:00",state:"未开始"},
					{id:5,time:"11:00",state:"未开始"},
					{id:6,time:"12:00",state:"未开始"},
					{id:7,time:"13:00",state:"未开始"},
				],
				//  ----------------------------------------------新list----------------------------------------------
				
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 0, //加载更多状态
				filterIndex: 1,
				synthesis: 1,
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				goodsCate: [],
				sid: 0,
				mockCateGoryList: [{
						id: 1,
						name: '手机数码'
					},
					{
						id: 2,
						name: '礼品鲜花'
					},
					{
						id: 3,
						name: '男装女装'
					},
					{
						id: 4,
						name: '母婴用品'
					},
					{
						id: 5,
						pid: 1,
						name: '手机通讯'
					},
					{
						id: 6,
						pid: 1,
						name: '运营商'
					},
					{
						id: 8,
						pid: 5,
						name: '全面屏手机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 9,
						pid: 5,
						name: '游戏手机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 10,
						pid: 5,
						name: '老人机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 11,
						pid: 5,
						name: '拍照手机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 12,
						pid: 5,
						name: '女性手机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 14,
						pid: 6,
						name: '合约机',
						picture: '../../static/order/pic.png'
					},
					{
						id: 15,
						pid: 6,
						name: '选好卡',
						picture: '../../static/order/pic.png'
					},
					{
						id: 16,
						pid: 6,
						name: '办套餐',
						picture: '../../static/order/pic.png'
					},
					{
						id: 17,
						pid: 2,
						name: '礼品',
					},
					{
						id: 18,
						pid: 2,
						name: '鲜花',
					},
					{
						id: 19,
						pid: 17,
						name: '公益摆件',
						picture: '../../static/order/pic.png'
					},
					{
						id: 20,
						pid: 17,
						name: '创意礼品',
						picture: '../../static/order/pic.png'
					},
					{
						id: 21,
						pid: 18,
						name: '鲜花',
						picture: '../../static/order/pic.png'
					},
					{
						id: 22,
						pid: 18,
						name: '每周一花',
						picture: '../../static/order/pic.png'
					},
					{
						id: 23,
						pid: 18,
						name: '卡通花束',
						picture: '../../static/order/pic.png'
					},
					{
						id: 24,
						pid: 18,
						name: '永生花',
						picture: '../../static/order/pic.png'
					},
					{
						id: 25,
						pid: 3,
						name: '男装'
					},
					{
						id: 26,
						pid: 3,
						name: '女装'
					},
					{
						id: 27,
						pid: 25,
						name: '男士T恤',
						picture: '../../static/order/pic.png'
					},
					{
						id: 28,
						pid: 25,
						name: '男士外套',
						picture: '../../static/order/pic.png'
					},
					{
						id: 29,
						pid: 26,
						name: '裙装',
						picture: '../../static/order/pic.png'
					},
					{
						id: 30,
						pid: 26,
						name: 'T恤',
						picture: '../../static/order/pic.png'
					},
					{
						id: 31,
						pid: 26,
						name: '上装',
						picture: '../../static/order/pic.png'
					},
					{
						id: 32,
						pid: 26,
						name: '下装',
						picture: '../../static/order/pic.png'
					},
					{
						id: 33,
						pid: 4,
						name: '奶粉',
					},
					{
						id: 34,
						pid: 4,
						name: '营养辅食',
					},
					{
						id: 35,
						pid: 4,
						name: '童装',
					},
					{
						id: 39,
						pid: 4,
						name: '喂养用品',
					},
					{
						id: 36,
						pid: 33,
						name: '有机奶粉',
						picture: '../../static/order/pic.png'
					},
					{
						id: 37,
						pid: 34,
						name: '果泥/果汁',
						picture: '../../static/order/pic.png'
					},
					{
						id: 39,
						pid: 34,
						name: '面条/粥',
						picture: '../../static/order/pic.png'
					},
					{
						id: 42,
						pid: 35,
						name: '婴童衣橱',
						picture: '../../static/order/pic.png'
					},
					{
						id: 43,
						pid: 39,
						name: '吸奶器',
						picture: '../../static/order/pic.png'
					},
					{
						id: 44,
						pid: 39,
						name: '儿童餐具',
						picture: '../../static/order/pic.png'
					},
					{
						id: 45,
						pid: 39,
						name: '牙胶安抚',
						picture: '../../static/order/pic.png'
					},
					{
						id: 46,
						pid: 39,
						name: '围兜',
						picture: '../../static/order/pic.png'
					},
				],
				mockGoodList: [{
						image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
						image2: "http://pic.rmb.bdstatic.com/819a044daa66718c2c40a48c1ba971e6.jpeg",
						image3: "http://img001.hc360.cn/y5/M00/1B/45/wKhQUVYFE0uEZ7zVAAAAAMj3H1w418.jpg",
						title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
						price: 179,
						sales: 61,
						oldPrice: 20000
					},
					{
						image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg",
						image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554013048&di=a3dc9fd1406dd7bad7fbb97b5489ec04&imgtype=jpg&er=1&src=http%3A%2F%2Fimg009.hc360.cn%2Fhb%2FnKo44ac2656F831c684507E3Da0E3a26841.jpg",
						image3: "http://img.zcool.cn/community/017a4e58b4eab6a801219c77084373.jpg",
						title: "潘歌针织连衣裙",
						price: 78,
						sales: 16,
						oldPrice: 20000
					},
					{
						image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg",
						image2: "http://m.360buyimg.com/n12/jfs/t247/42/1078640382/162559/3628a0b/53f5ad09N0dd79894.jpg%21q70.jpg",
						image3: "http://ikids.61kids.com.cn/upload/2018-12-29/1546070626796114.jpg",
						title: "巧谷2019春夏季新品新款女装",
						price: 108.8,
						sales: 5,
						oldPrice: 20000
					}, {
						image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=756705744,3505936868&fm=11&gp=0.jpg",
						image2: "http://images.jaadee.com/images/201702/goods_img/30150_d85aed83521.jpg",
						image3: "http://img13.360buyimg.com/popWaterMark/jfs/t865/120/206320620/138889/dcc94caa/550acedcN613e2a9d.jpg",
						title: "私萱连衣裙",
						price: 265,
						sales: 88,
						oldPrice: 20000
					}, {
						image: "https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg",
						image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553418265666&di=d4a7f7eb0ae3c859edeb921641ee1c3a&imgtype=0&src=http%3A%2F%2Fimg003.hc360.cn%2Fy3%2FM02%2FF8%2F9F%2FwKhQh1TuSkGELIlQAAAAAPuLl4M987.jpg",
						image3: "http://img.ef43.com.cn/product/2016/8/05100204b0c.jpg",
						title: "娇诗茹 ulzzang原宿风学生潮韩版春夏短",
						price: 422,
						sales: 137,
						oldPrice: 20000
				
					}, {
						image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
						image2: "http://image5.suning.cn/uimg/b2c/newcatentries/0070158827-000000000622091973_2_800x800.jpg",
						image3: "http://img.61ef.cn/news/201903/20/2019032009251784.jpg",
						title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
						price: 179,
						sales: 95,
						oldPrice: 20000
					},
				],
				topIcon:''
			};
		},
		onLoad: function(e) {
			console.log('获取顶部高度',uni.getStorageSync('statusBarHeight'))
			this.showPage();
			this.getAgent();
			this.getUserInfo()
		},
		methods: {
			// toother(url,vm) {
			// 	uni.navigateTo({
			// 		url: url+""
			// 	})
			// },
			getUserInfo() {
				var self = this;
				self.$http.get(service.api.login.info, {}).then(function(res) {
					// console.log(res);
					var list = res.data;
					self.topIcon = list.site_icon;
				});
			},
			getAgent() {
				var self = this;
				self.$http.get(service.api.user.getAgent, {}).then(function(res) {
					var list = res.data;
					self.num = list.consumption
					if (list.repurchase == 1) {
						self.show = true
					}
				});
			},
			search(value) {
				console.log(value);
				uni.navigateTo({
					url: '../shoppingCart/searchList?keyword=' + value
				});
			},
			showPage: function() {
				let self = this;
				self.$http.get(service.api.main.getpage).then(function(res) {
					if (res.code == 1) {
						self.components_list = res.data;
						console.log('这里是首页接口获取',self.components_list)
					}
				});
				self.$http.get(service.api.index.getCategoryNav).then(function(res) {
					if (res.code == 1) {
						self.navList = res.data;
						console.log('这里是首页分类接口获取',self.navList)
						self.navListNow = self.navList[0].ids
					}
				});
			},
			navChange: function(vm) {
				this.navListNow = vm;
				this.sid = vm
				this.getGoodsCate();
				if(this.navListNow == this.navList[0].ids){
					this.changeBox = 0
				}else{
					this.changeBox = 1
				}
				console.log('点击后的ids',this.navListNow)
			},
			flashBoxBtn: function(vm) {
				this.flashBoxNow = vm;
			},
			onCarousel: function(item) {
				var url = item.linkUrl;
				if (url == '') {
					uni.showToast({
						icon: 'none',
						title: '该功能暂未开放'
					});
				} else {
					if (url == '/pages/business/business') {
						// 获取入驻申请信息
						this.$http.post(service.api.index.getApplyInfo).then(res => {
							console.log(res, 'info-res');
							if (res.code === 1) {
								if (res.data.status === 1) {
									uni.navigateTo({
										url: '../business/store?merch_id=' + res.data.merch_id
									})
									return
								} else {
									uni.navigateTo({
										url: url
									});
								}
							}
						})
					} else {
						uni.navigateTo({
							url: url
						});
					}
				}
			},
			// 新 ----------------------------------------------新list----------------------------------------------
			//排序点击
			tabClick(index, idx) {
				if (this.filterIndex === index) {
					if (idx == 1) {
						this.synthesis = 0;
					} else {
						this.synthesis = 1;
					}
			
				} else {
					this.filterIndex = index;
					this.synthesis = 1;
				}
			
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			
				this.loading();
			},
			loading() {
				this.isLoading = false;
				this.scroll = false;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.goodsCate = [];
				this.getGoodsCate();
			},
			getGoodsCate() {
				var self = this;
				if (self.synthesis == 1) {
					var order = 'desc';
				} else {
					var order = 'asc';
				}
			
				if (self.filterIndex == 1) {
					var sort = 'sales';
				} else {
					var sort = 'price';
				}
				self.$http.post(service.api.category.goodList, {
					cate_ids: self.sid,
					'order': order,
					'sort': sort,
				}).then(function(res) {
					console.log(res);
					var list = res.data.data;
					self.goodsCate = list;
					if(list.length == 0){
						uni.showToast({
							icon: 'none',
							title: '暂无数据'
						});
					}
					
				});
			},
			//加载分类
			async loadCateList(fid, sid) {
				let list = this.mockCateGoryList;
				let cateList = list.filter(item => item.pid == fid);
			
				cateList.forEach(item => {
					let tempList = list.filter(val => val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 2) {
						return;
					}
					this.loadingType = 1;
				} else {
					this.loadingType = 0
				}
			
				let goodsList = this.mockGoodList;
				if (type === 'refresh') {
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					goodsList.sort((a, b) => b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					goodsList.sort((a, b) => {
						if (this.priceOrder == 1) {
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}
			
				this.goodsList = this.goodsList.concat(goodsList);
			
				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > 20 ? 2 : 0;
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			/* 
						//筛选点击
						tabClick(index) {
							console.log(index)
							if (this.filterIndex === index && index !== 2) {
								return;
							}
							this.filterIndex = index;
							if (index === 2) {
								this.priceOrder = this.priceOrder === 1 ? 2 : 1;
							} else {
								this.priceOrder = 0;
							}
							uni.pageScrollTo({
								duration: 300,
								scrollTop: 0
							})
							this.loadData('refresh', 1);
							// uni.showLoading({
							// 	title: '正在加载'
							// })
						}, */
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item) {
				console.log(item)
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				// uni.showLoading({
				// 	title: '正在加载'
				// })
			},
			//详情
			navToDetailPage(gid) {
				//测试数据没有写id，用title代替
				let id = gid;
				uni.navigateTo({
					url: `/pages/category/commodity?id=${gid}`
				})
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uni-bg-color;

		.search-section {
			width: 100vw;
			padding: 30rpx;
			background: red;
			.search-input {
				width: 690rpx;
				height: 66rpx;
				// background-color: #f1f1f1;
				border-radius: 33rpx;
				display: flex;
				align-items: center;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}
				text {
					margin-left: 10rpx;
					color: $uni-text-color-grey;
				}
			}
		}

		.index-elements {
			.swiper-section {
				position: relative;
				background: red;
				width: 100vw;
				height: 100%;
				padding: 20rpx;
				overflow: hidden;
					.index-elements-bg{
						position: absolute;
						bottom: -48rpx;
						left: 0;
						width: 100vw;
						height: 160rpx;
						background: #fff;
						border-radius: 26%;
					}
				.swiper {
					height: 100%;
				}

				.swiper-item {
					width: 710rpx;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}
				}
			}

			.menu-section {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				//display: flex;
				.menu-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 20upx;
					margin-bottom: 20upx;
					font-size: 20upx;

					image {
						width: 80rpx;
						height: 80rpx;
						padding-bottom: 20upx;
					}
				}
			}
		}

		.notice-section {
			padding: 20rpx;

			.notice {
				width: 710rpx;
				height: 72rpx;
				border-radius: 33rpx;
				display: flex;
				background-color: #f4f4f4;
				line-height: 72rpx;

				image {
					width: 121rpx;
					height: 32rpx;
					margin: 20upx 0;
					padding-left: 20rpx;
				}

				.line {
					width: 2rpx;
					height: 32rpx;
					background-color: #c3c3c3;
					margin: 20rpx 15rpx;
				}

				.content {
					color: $uni-text-color;
					font-weight: bold;
				}
			}
		}

		.group-section {
			padding: 20rpx;
			border-bottom: 20rpx solid #f3f3f3;
			box-sizing: border-box;
			width: 100%;

			.group-header {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
				}

				.sub-title {
					font-size: 22rpx;
					color: #999;
					margin-left: 20rpx;
				}

				image {
					width: 94rpx;
					height: 26rpx;
				}
			}

			.group-content {
				display: flex;
				overflow: hidden;

				.group-item {
					// width: 225rpx;
					width: 32%;
					margin: 15rpx;

					image {
						width: 224rpx;
						height: 224rpx;
						margin: 20rpx 0 10rpx;
					}

					.content {
						box-sizing: border-box;
						width: 224rpx;
						height: 47rpx;
						display: flex;
						justify-content: space-around;
						background: linear-gradient(90deg, #ffcc99, #e4842e);
						border-radius: 0px 0px 18upx 18upx;

						.label {
							padding: 0 10upx;
							// width: 128rpx;
							height: 42rpx;
							font-size: 20rpx;
							line-height: 42rpx;
							text-align: center;
							// display: flex;
							// justify-content: center;
							// align-items: center;
							transform: scale(0.9);
							background: #f69739;
							border-radius: 18upx;
						}

						.price,
						.label {
							color: #ffffff;
						}

						.price {
							font-size: 24upx;
							font-weight: bold;
						}
					}

					.name {
						width: 224rpx;
						margin-top: 10rpx;
						// text-align: center;
					}
				}

				& :nth-child(1),
				& :nth-child(3) {
					margin-left: 0;
					margin-right: 0;
				}
			}
		}

		.goods-section {
			background-color: #f3f3f3;
			padding: 0 20rpx 0;

			.goods-header {
				padding: 10rpx 0;
				color: #262626;
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.goods-list {
				// margin-bottom: 50rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.goods-item {
					border-radius: 20upx;
					width: 45vw;
					background-color: #ffffff;
					margin-bottom: 20rpx;
					box-shadow: 4upx 4upx 20upx #aaa;
					image {
						width: 100%;
						height: 330rpx;
						margin-bottom: 20rpx;
						border-radius: 20upx 20upx 0 0;
					}

					.title {
						padding: 10rpx 30rpx 0;
						font-size: 26rpx;
						color: $uni-text-color;
						font-weight: bold;
						line-height: 1.4;
					}

					.price {
						padding: 14rpx 24rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #f81149;

						text {
							font-weight: 100;
							font-size: 20rpx;
							color: #999;
							text-decoration: line-through;
							margin-left: 15rpx;
						}
					}
				}
			}
		}
	}

	.pic-group {
		padding: 20upx;
	}

	.img-pic {
		display: none;
	}

	.pic-style {
		display: flex;
		justify-content: space-around;
		position: relative;
		z-index: 1;
		margin: 0 auto;
		width: 100%;

		image {
			width: 100%;
			z-index: -1;
			zoom: 1;
		}
	}

	.pic-style-1 {
		flex-direction: column;
		align-items: center;

		image {
			display: block;
			width: 100%;
		}
	}

	.pic-style-2 {
		image {
			&:nth-child(1) {
				display: block;
				width: 40%;
				height: 365upx;
			}

			&:nth-child(2) {
				display: block;
				width: 60%;
				height: 365upx;
			}
		}
	}

	.pic-style-3 {
		height: 365upx;

		image {
			&:nth-child(1) {
				display: block;
				width: 40%;
				height: 365upx;
				position: absolute;
				left: 0;
			}

			&:nth-child(2) {
				display: block;
				width: 60%;
				height: 180upx;
				position: absolute;
				right: 0;
			}

			&:nth-child(3) {
				display: block;
				width: 60%;
				height: 180upx;
				position: absolute;
				// right: 222upx;
				right: 0;
				bottom: 0;
			}

			// &:nth-child(4) {
			// 	display: block;
			// 	width: 216upx;
			// 	height: 180upx;
			// 	position: absolute;
			// 	right: 0;
			// 	bottom: 0;
			// }
		}
	}

	.pic-style-4 {
		height: 365upx;

		image {
			&:nth-child(1) {
				display: block;
				width: 40%;
				height: 365upx;
				position: absolute;
				left: 0;
			}

			&:nth-child(2) {
				display: block;
				width: 60%;
				height: 180upx;
				position: absolute;
				right: 0;
			}

			&:nth-child(3) {
				display: block;
				width: 216upx;
				height: 180upx;
				position: absolute;
				right: 222upx;
				bottom: 0;
			}

			&:nth-child(4) {
				display: block;
				width: 216upx;
				height: 180upx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.pic-style-5 {
		display: flex;
		justify-content: space-around;

		image {
			flex: 1;
			margin: 0 5upx;

			&:first-child {
				margin: 0;
				display: block;
			}

			&:nth-child(2) {
				margin-right: 0;
				display: block;
			}

			&:nth-child(3) {
				display: block;
			}

			&:nth-child(4) {
				margin: 0;
				display: block;
			}
		}
	}

	.pic-style-6 {
		display: flex;
		flex-wrap: wrap;

		>image {
			&:nth-child(1) {
				display: block;
				width: 50%;
				height: 200upx;
				margin-top: 5upx;
			}

			&:nth-child(2) {
				display: block;
				width: 50%;
				height: 200upx;
				margin-top: 5upx;
			}

			&:nth-child(3) {
				display: block;
				width: 50%;
				height: 200upx;
				margin-top: 5upx;
			}

			&:nth-child(4) {
				display: block;
				width: 50%;
				height: 200upx;
				margin-top: 5upx;
			}
		}
	}

	.pic-style-7 {
		display: inline-flex;
		flex-flow: row wrap;
		align-content: flex-start;

		image {
			display: block;
			box-sizing: border-box;
			flex: 0 0 50%;
		}
	}

	.pic-style-8 {
		image {
			flex: 1;

			&:nth-child(1) {
				display: block;
				height: 250upx;
			}

			&:nth-child(2) {
				display: block;
				height: 250upx;
			}

			&:nth-child(3) {
				display: block;
				height: 250upx;
			}
		}
	}

	/deep/ .u-content {
		background-color: #f4f4f4 !important;
	}

	.good-list {
		margin: 20upx 20upx 0;

		.good-item {
			border-radius: 20upx;
			width: 220rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 220rpx;
				margin-bottom: 20rpx;
			}

			.title {
				padding: 10rpx 10rpx 0;
				font-size: 26rpx;
				color: $uni-text-color;
				font-weight: bold;
				line-height: 1.4;
			}

			.price {
				padding: 14rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #f81149;

				text {
					font-weight: 100;
					font-size: 20rpx;
					color: #999;
					margin-left: 15rpx;
				}
			}
		}
	}

	.pic {
		width: 92%;
		height: 175upx;
		margin-left: 30upx;
		// margin-top: 20upx;
	}


	.popup1 {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.cancel {
		width: 687upx;
		height: 145upx;

		background: #F4F4F4;
		position: fixed;
		bottom: 0;

		view {
			height: 100upx;
			line-height: 100upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			text-align: center;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.shade {
		width: 100%;
		height: 782upx;
		// overflow: scroll;
		// min-height: 40vh;
		// background: #F4F4F4;
		position: fixed;
		bottom: 0;
		top: 160upx;
		z-index: 99;
		padding-bottom: 60px;
	}

	.list-scroll-content {
		height: 100%;
	}

	.list {
		padding: 30upx;

		.box {
			width: 690upx;
			height: 194upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			margin-bottom: 30upx;

			.content {
				display: flex;
				justify-content: space-around;

				.box-left,
				.box-left1,
				.box-left2 {
					width: 212upx;
					height: 194upx;
					background: #F81149;
					box-shadow: 3upx 0px 8upx 1px #FCE1E8;
					border-radius: 12upx 0px 0px 12upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.icon {
						margin-top: 20upx;
						height: 49upx;
						font-size: 40upx;
						// font-weight: bold;
						color: #FFFFFE;
						line-height: 59upx;
						text-align: center;
					}

					.num {
						font-size: 80upx;
						font-weight: bold;
						color: #FFFFFE;
						line-height: 72upx;
					}

				}

				.box-left1 {
					background: #c1c1c1;
				}

				.box-left2 {
					background: #F86A8C;
				}


				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.box-center {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-right: 20upx;

					.text {
						font-weight: bold;
						color: #242424;
						font-size: 36upx;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 24upx;
						color: #999999;
						transform: scale(0.9);
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					justify-content: center;

					.text,
					.text1,
					.text2 {
						width: 140upx;
						height: 58upx;
						background: #FFFFFF;
						border: 2upx solid #F81149;
						border-radius: 29upx;
						text-align: center;
						margin-right: 22upx;
						font-size: 32upx;
						font-weight: 500;
						color: #F81149;
						text-align: center;
					}

					.text1 {
						border: 2upx solid #C1C1C1;
						color: #C1C1C1;
					}

					.text2 {
						border: 2upx solid #F86A8C;
						color: #F86A8C;
					}
				}
			}
		}
	}

	// 优惠券
	.discount-bg {
		background-image: url(../../static/img/bg.png);
		background-size: 100% 100%;
		width: 100upx;
		height: 36upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin-right: 20upx;
	}

	.icons {
		font-size: 12px;
	}

	.container {
		// position: fixed;
		// top: 0;
		// height: 100%;
		// overflow: hidden;
	}
	
	
	// 导航
	.navigation{
		background: #f3f3f3;
		.navigation_bg{
			background: red;
		}
		.navigation_box{
			display: flex;
			.scroll-view_H{
			  width: 100%;
			  white-space: nowrap;
			}
			.scroll-view-item_H{
			  width: 200px;
			  height: 100px;
			  display: inline-block;
			}
			span{
				display: inline-block;
				padding-bottom: 2vw;
				margin: 2vw;
				color: #fff;
				white-space:nowrap;
			}
			span.active{
				border-bottom: 2rpx solid #fff;
			}
		}
	}
	.some_box{
		background: #f3f3f3;
		.some_box_one{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.some_box_one_eve{
				width: 48vw;
				margin: 1vw;
				padding: 2vw;
				background: #fff;
				.some_box_one_eve_top{
					font-size: 32rpx;
					font-weight: bold;
				}
				text{
					display: block;
					height: 100rpx;
					color: red;
					font-size: 20rpx;
				}
				image{
					width: 44vw;
					height: 200rpx;
				}
			}
		}
		.some_box_two{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.some_box_two_eve{
				width: 48vw;
				margin: 1vw;
				padding: 2vw;
				background: #fff;
				text{
					color: red;
					font-size: 20rpx;
				}
				.some_box_two_eve_top{
					font-size: 32rpx;
					font-weight: bold;
				}
				.some_box_two_eve_bot{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.some_box_two_eve_bot_eve{
						width: 21vw;
						border: 1rpx solid #ccc;
						image{
							width: 21vw;
							height: 200rpx;
						}
						text{
							display: block;
							text-align: center;
							border: 1rpx solid red;
							border-radius: 60rpx;
							margin:0 10rpx 10rpx 10rpx;
						}
					}
				}
			}
		}
	}
	// 立即抢购
	.flash{
		background:#fff;
		border-top: 1vw soild #f3f3f3;
		.flash_top{
			padding: 2vw;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			.flash_top_text{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.flash_time{
			.flash_time_bg{
				background: #fff;
				.flash_time_box{
					display: flex;
					.scroll-view_H{
					  width: 100%;
					  white-space: nowrap;
					}
					.scroll-view-item_H{
					  width: 200px;
					  height: 100px;
					  display: inline-block;
					}
					.flash_time_box_eve{
						position: relative;
						padding: 1vw 4.5vw;
						display:flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						// border-right: 4rpx solid #ccc;
						.flash_time_box_eve_bg{
							width: 5rpx;
							height: 50rpx;
							background: #ccc;
							position: absolute;
							top: 16rpx;
							right: 10rpx;
						}
						.flash_time_box_eve_time{
							white-space:nowrap;
							font-weight: bold;
							font-size:32rpx;
							color:#999;
							line-height: 32rpx;
						}
						.flash_time_box_eve_text{
							white-space:nowrap;
							font-size:28rpx;
							color:#999;
						}
					}
					.flash_time_box_eve.active{
						.flash_time_box_eve_time{
							color:red;
						}
						.flash_time_box_eve_text{
							color:red;
						}
					 }
				}
			}
		}
		.flash_content{
			padding: 2vw;
			display: flex;
			image{
				width: 150rpx;
				height: 200rpx;
				margin-right: 60rpx;
			}
			.flash_content_right{
				width: 68vw;
				.flash_content_right_name{
					font-size: 32rpx;
				}
				.flash_content_right_num{
					margin-left: 10rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					.flash_content_right_num_percentage{
						width: 300rpx;
						height: 30rpx;
						border-radius: 50rpx;
						overflow: hidden;
						background: #ffc3cb;
						position: relative;
						.flash_content_right_num_percentage_now{
							font-size: 20rpx;
							width: 80%;
							height: 30rpx;
							background: #d64d3b;
							position: absolute;
							top: 0;
							left:0;
							line-height: 30rpx;
							color: #eee;
							padding:0 20rpx;
							box-sizing: border-box;
						}
					}
					text{
						color: #666;
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
				.flash_content_right_price{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.flash_content_right_price_left{
						.flash_content_right_price_left_now{
							color: red;
							font-size: 32rpx;
							margin-right: 10rpx;
						}
						.flash_content_right_price_left_old{
							color: #999;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
					.flash_content_right_price_buy{
						color: red;
						padding:0 30rpx;
						border-radius: 6rpx;
						border: 1rpx solid red;
					}
				}
			}
		}
	}
	// ----------------------------------------------新list----------------------------------------------
	.icon-up {
		height: 20upx;
		width: 20upx;
	}
	
	.icom-down {
		height: 20upx;
		width: 20upx;
	}
	
	page,
	.content {
		background: #f8f8f8;
	}
	
	.content {
		padding-top: 96upx;
	}
	
	.navbar {
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: calc(var(--status-bar-height) + 88upx);
		/* #endif */
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;
		justify-content: space-around;
	
		.nav-item {
			// flex: 1;
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
	
			&.current {
				color: #f81149;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #f81149;
				}
			}
		}
	
		.p-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
	
			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
	
				&.active {
					color: #f81149;
				}
			}
	
			.icon-up {}
	
	
		}
	
	
		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			// width: 80upx;
			position: relative;
			font-size: 44upx;
	
	
		}
	
		// 筛选的样式
		.filter {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			font-weight: 500;
			flex-wrap: nowrap;
			color: rgba(153, 153, 153, 1);
	
			.icon-filter {
				height: 24upx;
				width: 24upx;
				margin-top: 5upx;
			}
		}
	}
	
	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;
	
		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
			padding-top: 61upx;
		}
	
		&.none {
			display: none;
		}
	
		&.show {
			background: rgba(0, 0, 0, .4);
	
			.cate-content {
				transform: translateX(0);
			}
		}
	}
	
	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;
	
		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}
	
		.two {
			height: 64upx;
			font-size: 30upx;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(101, 101, 101, 1);
		}
	
		.children-content {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			padding: 10upx;
	
			.children-list {
				width: 32.3333%;
				height: 101upx;
				border-radius: 5upx;
				text-align: center;
				padding: 10upx;
				box-sizing: border-box;
	
				.cl {
					height: 100%;
					width: 100%;
					line-height: 81upx;
					background: rgba(239, 239, 239, 1);
				}
	
			}
		}
	
		.active {
			color: #f81149;
		}
	}
	
	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		// padding: 0 30upx;
		// background: #fff;
	
		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 20upx;
			margin-bottom: 20upx;
			background: #fff;
	
			&:nth-child(2n+1) {
				margin-right: 1vw;
			}
		}
	
		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3upx;
			overflow: hidden;
			border-radius: 10upx 10upx 0px 0upx;
	
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
	
		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 26upx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	
		.price-box {
			display: flex;
			align-items: center;
			padding-right: 10upx;
			font-size: 24upx;
			color: #909399;
	
			.old-price {
				text-decoration: line-through;
			}
		}
	
		.price {
			font-size: 32upx;
			color: #f81149;
			line-height: 1;
			font-weight: bold;
	
			&:before {
				content: '￥';
				font-size: 26upx;
				font-weight: bold;
			}
		}
	
		.old-price {
			margin-left: 29upx;
		}
	}
</style>
